<template>
	<view v-if="firstLaoding">
		<view class="scroll-Y">
			<z-paging class="zPagingCircle" ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
				@scroll="scroll" :empty-view-style="{ 'margin-bottom': '100rpx' }" :loading-more-enabled='!isend'
				:hide-empty-view='isend'>
				<template #top>
					<view class="barTitle"
						:style="{height: height + 'px', paddingBottom: '20rpx', paddingTop: top + 'px'}">
						{{circleName}}
					</view>
				</template>

				<view class="box">

					<view class="search-box">
						<view class="search">
							<view class="search-input">
								<view class="search-input-icon">
									<image :src="ossUrl + `/static/card/11.png`"></image>
								</view>
								<input type="text" placeholder="请输入关键字……" placeholder-class="search-input-ac"
									v-model="params.keyword" @input="reload">
							</view>
							<view class="search-rig" @click="open">
								<image :src="ossUrl + `/static/card/8.png`"></image>
								<image :src="ossUrl + `/static/card/9.png`" mode="" class="search-rig-s"></image>
							</view>
						</view>
						<view class="flex-row circleTabs">
							<view class="circle-item-add" style="margin:0 30rpx;"
								:class="{ 'circle-item-ac': 0 === params.circle_id }" @click="setTab(0)">
								<view class="circle-item-add-icon">
									<view class="circle-item-add-icon-item">
										<uni-icons custom-prefix="iconfont" type="icon-quanbu" size="22"
											color="#ffffff"></uni-icons>
									</view>

								</view>
								<view class="circle-text">全部</view>
								<view class="triangle" :class="{ active: 0 === params.circle_id }"></view>
							</view>
							<view class="circle-item" :class="{ 'circle-item-ac': it.id === params.circle_id }"
								@click="setTab(it.id, it)" v-for="it in tab" :key="it.id"
								:style="it.isend?'filter: grayscale(100%)':''">

								<view class="circle-item-add-icon">
									<image :src="it.logo" mode="aspectFill" class="circle-img" />
									<view class="circle-item-badge">
										<u-badge max="99" :value="it.unread" :showZero="false"></u-badge>
									</view>
								</view>
								<view class="circle-text ellipsis">{{it.name || ''}}</view>
								<view class="triangle" :class="{ active: it.id === params.circle_id }"></view>
							</view>
							<view class="circle-item-add" @click="toFindInterest">
								<view class="circle-item-add-icon">

									<view class="circle-item-add-icon-item">
										<uni-icons custom-prefix="iconfont" type="icon-jiahao" size="17"
											color="#ffffff"></uni-icons>
									</view>
								</view>
								<view class="circle-text">找兴趣</view>
								<view class="triangle"></view>
							</view>
						</view>


					</view>

					<view class="tab-box">
						<view class="tab flex-row-between">
							<view class="flex-row" v-if="!isend">
								<view @click="setType(1)" class="tab-item" :class="{ active: params.type === 1 }">好友
								</view>
								<view @click="setType(2)" class="tab-item" :class="{ active: params.type === 2 }">发现
								</view>
								<view @click="setType(3)" class="tab-item" :class="{ active: params.type === 3 }">同城
								</view>
								<view @click="setType(4)" class="tab-item" :class="{ active: params.type === 4 }">足迹
								</view>
								<view @click="gobd(params.circle_id)" v-if="circle_info.permission.indexOf(3)!=-1"
									class="tab-item">榜单
								</view>
								<view @click="toMore" v-if="goodscount" class="tab-item">知识
								</view>
							</view>

							<view class="tab-r" v-if="!isend">
								<view class="master flex-row" v-if="circle_info.host_head">
									<view class="master-tag" @click="circle_info.can_apply === 1 ? apply() : ''">圈主
									</view>
									<view class="master-avatar" style="margin-left: 10rpx;border: 1rpx solid #F4DEBF;"
										@click="toIndex(circle_info.host_info.b_id)">
										<image :src="circle_info.host_head" mode="" style="border-radius: 50%;"></image>
									</view>
									<template v-if="Array.isArray(circle_info.deputy_list)">
										<template v-for="(it,index) in circle_info.deputy_list">
											<view class="master-avatar" @click="toIndex(it.b_id)">
												<image :src="it.head" mode="" style="border-radius: 50%;"></image>
											</view>
										</template>
									</template>
								</view>
								<view @click="apply" class="apply"
									v-else-if="circle_info.can_apply == 1 && circle_info.admin_limit.remaining > 0">
									申请圈主</view>
							</view>
						</view>
					</view>
					<block v-if="isend">
						<u-empty mode="permission" text="您的圈子已到期" style='margin-top: 30rpx;'>
						</u-empty>
						<view v-if="circle_host==1" class="xfbox"><u-button @click="xufei" color="#12B475"
								iconColor='#12B475' text=" 立即续费" size="normal" type="success"></u-button></view>
					</block>
					<block v-else>
						<view v-if="is_render" style="padding-top: 10rpx;">
							<FindVue v-if="params.type === 2 || params.type === 4" ref="FindVueRef" :dids='dids'
								:circleInfo="circle_info" :circleId="params.circle_id" @reload="reload" />
							<ListVue ref="ListVueRef0" v-if="params.type === 1" :data="list" :circleInfo="circle_info"
								:circleId="params.circle_id" @reload="reload" />
							<ListVue ref="ListVueRef2" v-if="params.type === 3" :data="list" :circleInfo="circle_info"
								:circleId="params.circle_id" @reload="reload" />
						</view>
					</block>



				</view>



			</z-paging>
		</view>
		<Search ref="SearchRef" :searchInfo="searchInfo" @submit="submit" :type="4" />
	</view>

</template>

<script>
	import Search from '../card/components/search.vue'
	import {
		InformationCircleList,
		InformationApplication,
		InformationCancellation,
		InformationLike,
		i_joined_circle_list,
		circle_recently,
		recently_visited_circle,
		circle_host_information,
		InformationScreen,
		InformationBusinessCardList,
		InformationCourseList,
		InformationUserInfo,
		circle_finally
	} from '@/common/http/api.js'
	import countDownVue from './components/countDown.vue';
	import {
		convertToTimestamp,
		getRemainingTimeToTimestamp
	} from '@/common/time.js'
	import HeaderBar from "@/components/header/header.vue";
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'


	import FindVue from './page/find/find.vue';
	import ListVue from './page/list/list.vue';
	export default {
		mixins: [ZPMixin],
		props: ['isBackHome'],
		// 注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		components: {
			countDownVue,
			HeaderBar,

			FindVue,
			ListVue,
			Search
		},
		data() {
			return {
				isend: false,
				top: 0,
				height: 0,
				width: 0,
				right: 0,
				circle_host: 0,
				//分页
				params: {
					type: 2, //1 好友 2 发现 3 同城 4足迹
					circle_id: '',
					address: undefined,
					keyword: undefined
				},
				isList: true,

				list: [],
				opacity: 0,

				searchValue: '',
				circleType: 1,

				tab: [],
				firstLaoding: false,
				id: '', //圈子id
				is_render: true,
				circle_info: '',
				searchInfo: '',
				city: '',
				cardList: [],
				dids: [],
				administrator: 0,
				goodscount: 0,
				total: 0,
				myUserId: ''
			}
		},
		onReady() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();

			this.top = menuButtonRect.top

			this.height = menuButtonRect.height

			this.width = menuButtonRect.width

			this.right = 375 - menuButtonRect.right
		},
		onLoad(e) {
			let token = uni.getStorageSync('token')
			if (!token) return
			this.$store.dispatch('getAddress', 2)
			if (e.userId) {
				this.params.user_id = e.userId
			}
     


		},

		onShow() {
			let token = uni.getStorageSync('token')
			if (!token) return
		
    
			this.getTabLis()

			// 判断是否在详情删除了文章

			if (uni.getStorageSync('delLogId')) {

				let did = uni.getStorageSync('delLogId')

				// 删除13
				if (this.params.type == 1 || this.params.type == 3) {
					this.list = this.list.filter(item => item.id != did)
					uni.removeStorageSync('delLogId')
				}
				// 删除24
				if (this.params.type == 2 || this.params.type == 4) {
					this.dids = [...this.dids, did]
					uni.removeStorageSync('delLogId')

				}
			}

			//圈子名片
			InformationBusinessCardList().then(res => {
				this.cardList = res.data
			})

			//判断是否加入圈子
			// Is_it_an_administrator().then(res => {
			// 	this.administrator = res.data
			// })
			this.$store.dispatch('updateMessageCount')
			if (!this.$store.state.isCircleRefresh) {
				return
			}
			this.$store.commit('setIsCircleRefresh', false)
			InformationUserInfo().then(res => {
				this.myUserId = res.data.id
			})
		},

		onHide() {


		},
		computed: {
			circleName() {
				if (this.params.circle_id === 0) {
					return '圈子'
				}
				if (this.tab.some(i => i.id === this.params.circle_id)) {
					return this.tab.find(i => i.id === this.params.circle_id).name + '（' + this.total + '）'
				}
			}
		},
		watch: {
			'params.circle_id': {
				handler(val) {
					this.lastTimeHttp()
				}
			}
		},
		methods: {
			xufei() {
				uni.navigateTo({
					url: "/pagesA/beforeCreateCircle/beforeCreateCircle?cid=" + this.params.circle_id + '&ctype=' +
						this.circleType
				})
			},
			getRemainingTimeToTimestamp,
			//最后访问  更新时间
			lastTimeHttp() {
				circle_finally({
					circle_id: this.params.circle_id
				})
			},
			getGoodsCount() {
				InformationCourseList({
					id: '',
					page: 1,
					circle_id: this.params.circle_id,
				}).then(res => {
					this.goodscount = res.data.length
				})
			},
			toMore(e) {

				uni.navigateTo({
					url: '/pagesA/courseList/courseList?id=' + this.myUserId + '&cid=' + this.params.circle_id +
						'&type=1'
				})
			},
			toIndex(b_id) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + b_id
				})
			},
			gobd(e) {

				uni.navigateTo({
					url: '/pagesA/popularityChart/popularityChart?circle_id=' + e
				})
			},


			/**设置 tab 值
			 * @param {Object} e params.type
			 */
			getTabLis() {
				circle_recently().then(res => {
					this.id = res.data
					this.params.circle_id = res.data
					this.getGoodsCount()
					this.getCircleInfo()
					this.getTabs()
					InformationScreen({
						type: 1,
						circle_id: res.data
					}).then(res => {
						this.searchInfo = res.data
					})
				
						this.firstLaoding = true
			
					
				})
			},
			setType(e) {
				// this.params.permission === undefined
				if (e === 3) {
					if (this.city) {
						this.params.type = e
						this.params.city = this.city
						this.$nextTick(() => {
							this.reload()
						})
					} else {
						this.$store.dispatch('getCity').then(res => {
							this.params.type = e
							this.params.city = res
							this.city = res
							this.$nextTick(() => {
								this.reload()
							})
						}).catch(res => {
							this.$u.toast(res)
						})
					}

				} else {
					this.params.city === undefined
					this.params.type = e
					this.$nextTick(() => {
						this.reload()
					})
				}


			},
			async getCircleInfo() {
				if (this.params.circle_id === 0) return
				const res = await circle_host_information({
					circle_id: this.params.circle_id
				})
				this.circle_info = res.data
			},
			setTab(id, it) {
				if (it) {
					it.unread = 0
				}

				this.is_render = false
				this.isend = false
				this.circle_host = 0
				if (it) {
					this.isend = it.isend
					this.circle_host = it.circle_host
					this.circleType=it.type
				}



				recently_visited_circle({
					id
				}).then(res => {
					this.id = id
					this.params.circle_id = id
					this.is_render = true

					if (it && it.isend) {
						return
					}
					this.getCircleInfo()
					this.getGoodsCount()
					this.$nextTick(() => {
						this.reload()
					})
				})
			},
			getTabs() {
				recently_visited_circle({
					id: this.id
				}).then(res => {
					this.isend = false
					res.data.forEach(item => {
						item.isend = false
						let nowdate = new Date()
						let target = new Date(item.end_time)
						if (item.end_time && target < nowdate) {
							item.isend = true
							if (this.params.circle_id == item.id) {
								this.isend = true
								this.circle_host = item.circle_host
							}
						}

					})


					this.tab = res.data
				})
			},
			toFindInterest() {
				if (this.cardList.length === 0) {
					uni.navigateTo({
						url: '/pages/index/addMyCard'
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/findInterest/findInterest'
					})
				}

			},
			apply() {
				let name = this.tab.find(i => i.id === this.params.circle_id).name
				uni.navigateTo({
					url: '/pagesA/applyMaster/applyMaster?id=' + this.params.circle_id + '&name=' + name
				})
			},
			copy(name) {
				if (name) {
					uni.setClipboardData({
						data: name,
						success: function() {
							uni.showToast({
								duration: 3000,
								title: "已复制!",
								icon: 'none'
							})
						}
					});
				} else {
					uni.showToast({
						duration: 3000,
						title: "暂无内容复制！"
					})
				}

			},
			getImgCount(arr) {
				let count = 0
				try {
					arr.forEach(i => {
						if (this.$getIsImage(i) === 1) {
							count++
						}
					})
				} catch (e) {

				}
				return count
			},

			goBack() {
				uni.navigateBack()
			},
			scroll(e) {
				var scrollTop = e.detail.scrollTop;
				// 计算透明度值
				this.opacity = Math.min(scrollTop / 100, 1);

			},
			/**
			 * 分页
			 * @param {Object} pageNo 页码
			 * @param {Object} pageSize 数量
			 */
			query(pageNo, pageSize) {

				//this.onReachBottomReset()
				let token = uni.getStorageSync('token')
				if (!token) return
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {

				//this.reload(true)
				if (this.params.type === 2 || this.params.type === 4) {
					this.$refs.FindVueRef.reload()
				}
			},
			init(pageNo = 1, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}

				InformationCircleList(params).then(res => {
					this.total = res.total
					res.data.forEach(i => {
						i.upload = this.getUpload(i.upload)
						i.img = Array.isArray(i.upload) && i.upload.length > 0 ? i.upload[0] : ''
						//视频默认 转图片
						if (i.img) {
							if (this.$getIsImage(i.img) === 2) {
								//视频
								i.img = i.img + '?x-oss-process=video/snapshot,t_0,f_jpg,w_360'
							} else {
								i.img = i.img + '?imageMogr2/thumbnail/360x'
							}
						}
					})


					this.$refs.paging.complete(res.data);
					this.$nextTick(() => {

						if (this.params.type == 2 || this.params.type == 4) {
							this.$refs.FindVueRef.render(res.data)
						}

						if (params.page === 1 && res.data.length === 0) {
							this.$nextTick(() => {
								if (this.params.type === 3) {
									this.$refs.ListVueRef2.loading = false
								}
								if (this.params.type === 1) {
									this.$refs.ListVueRef0.loading = false
								}
							})
						}
					})








				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			reload() {
				//this.list = []
				//this.params.page = 1
				// this.$attrs
				this.dids = []
				if (this.params.type === 2 || this.params.type === 4) {
					this.$refs.FindVueRef.reload()
				}
				if (this.params.type === 1) {
					this.$refs.ListVueRef0.reload()
				}
				if (this.params.type === 3) {
					this.$refs.ListVueRef2.reload()
				}
				this.$refs.paging.reload();
			},
			getUpload(arr) {
				if (Array.isArray(arr) && arr.length > 0) {
					return arr
				}
				if (typeof arr === 'string') {
					if (arr) {
						return arr.split(',')
					}
				}
				return []
			},
			sendMessage(id) {
				uni.navigateTo({
					url: '/pagesA/wxChat/wxChat?id=' + id
				})
			},
			PageScrollY(e) {
				const scrollTop = e.detail.scrollTop;
				// 计算透明度值
				this.opacity = Math.min(scrollTop / 100, 1);
			},
			getData(params) {

				let token = uni.getStorageSync('token')
				if (!token) return
				if (params.userId) {
					this.params.user_id = params.userId
					this.$refs.paging.reload();
				}

				//this.reload()
			},

			submit(name) {
				this.params.address = name
				this.reload()
			},
			cancle(id) {
				uni.showLoading()
				InformationCancellation({
					id
				}).then(res => {
					this.$refs.paging.reload();
					uni.showToast({
						duration: 3000,
						title: '取消成功',
						icon: 'none'
					})
				}).finally(err => {
					uni.hideLoading()
				})
			},
			likeRquest(it) {

				//uni.showLoading()
				InformationLike({
					id: it.id
				}).then(res => {
					//this.reload()
					if (it.like_type === 1) {
						it.like_type = 2
						if (it.like_count > 0) {
							it.like_count--
						}
					} else {
						it.like_type = 1
						it.like_count++
					}
				})
			},
			getValue(value) {
				if (value > 0) {
					return value.toFixed(2)
				}
				return 0
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/circle/detail?id=' + id
				})
			},
			toPeople(id) {
				uni.navigateTo({
					url: '/pagesA/eventRegistration/eventRegistration?id=' + id
				})
			},
			open() {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.$refs.SearchRef.show()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.xfbox {
		margin: 0 auto;
		margin-top: 60rpx;
		width: 360rpx;
	}


	.scroll-Y {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		//background: #fff;
		// background: linear-gradient(to bottom, #b4f0df 0%, #f6f7f8 473rpx, #f6f7f8 473rpx, #f6f7f8 100%);
	}

	.box {
		// min-height: 100vh;
		// background: #292639!important;
	}

	.master {
		background-color: #242232;
		border-radius: 20rpx;
		padding: 0 10rpx;
		font-size: 16rpx;
		// max-width: 150rpx;
		width: fit-content;
		height: 50rpx;
		border-radius: 20rpx;

		&-avatar {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}

		&-tag {
			height: 30rpx;
			background-color: #e9e9e9;
			padding: 5rpx 10rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;

		}
	}

	.apply {
		font-size: 26rpx;
		padding: 5rpx 30rpx;
		background-color: #91c29b;
		border-radius: 20rpx;
		color: #fff;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 15rpx solid #242232;
		/* 控制三角形高度和颜色 */

		&.active {
			border-bottom-color: #fff;
		}
	}

	.circle-item {
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.circle-img {
			width: 90rpx;
			height: 90rpx;
			background-color: #e9e9e9;
			border-radius: 10rpx;
		}

		.circle-text {
			width: 100rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin: 10rpx 0;

		}
	}

	.circle-item-add-icon {
		width: 102rpx;
		height: 102rpx;
		border-radius: 20rpx;
		// background-color: #33303f;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		//padding: 6rpx;

		&>view,
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx !important;
		}
	}

	.circle-text {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		margin: 10rpx 0;
	}

	.circle-item:first-child {
		margin-left: 20rpx;
	}

	.search-layout {
		width: 100%;
		display: flex;
		align-items: center;

		.search {
			flex: 1;
			margin-right: 20rpx;
		}
	}

	.search {
		background-color: #fff;
		border-radius: 20rpx;
		padding-left: 20rpx;
		display: flex;

		.search-input {
			flex: 1;
			min-width: 0;
			height: 100%;
			display: flex;
			align-items: center;
			padding-right: 10rpx;

			input {
				color: #fff;
			}
		}

		.search-btn {
			color: #333;
			// border-left: 1px solid #7e7b8c;
			font-size: 24rpx;
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			position: relative;
		}

		.search-btn::before {
			width: 1px;
			height: 70%;
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			margin: auto;
			background: #7e7b8c;
		}
	}

	// .tab-top {

	// 	height: 20rpx;
	// }
	.test {
		background: #292639;
		height: 180rpx;
	}

	.tab-box {
		z-index: 999999;
		position: sticky;
		top: 0;
		// position: relative;
		width: 100%;
		height: 81rpx;
		background: #292639;
	}

	.tab {
		padding: 20rpx;
		// padding-top: 0;
		// background: #fff;
		overflow: hidden;

		background: #fff;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		width: 100%;
		height: 81rpx;
		// position: absolute;
		// top: 0;
		// left: 0;
		box-sizing: border-box;

		&-item {
			font-size: 32rpx;
			color: #bdbdbd;
			margin-right: 20rpx;

			&.active {
				color: #121212;
				border-bottom: 1px solid #121212;
			}
		}

		.tab-r {
			width: fit-content;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			margin: auto;
		}
	}



	image {
		width: 100%;
		height: 100%;
	}

	.barTitle {
		// width: 100%;
		// text-align: center;
		// font-family: PingFang SC;
		// font-weight: 400;
		// font-size: 30rpx;
		// color: #211C1E;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		background: #292639;
		//background: red;
	}

	.list {
		width: 100%;

		.list-item {
			width: 100%;
			background: #FFFFFF;
			border-bottom: 12rpx solid #f6f7f8;

			box-sizing: border-box;
			padding: 48rpx 32px 28rpx;
			position: relative;

			&-btn {
				font-size: 24rpx;
				position: absolute;
				top: 0;
				right: 30rpx;
			}

			.list-item-t {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
			}

			.list_item-img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.list_item-header {
				min-width: 0;
				flex: 1;
				margin-left: 28rpx;

				.list_item-header-h {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.list_item-header-h-l {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.list_item-header-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							margin-right: 35rpx;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}

						.list_item-header-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;

							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-header-h-r {
						padding: 12rpx 18rpx;
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 24rpx;
						color: #999999;
						background: #F6F7F8;
					}
				}

				.list_item-header-time {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 22rpx;
					color: #999999;
					display: flex;

				}
			}

			.list-item-content {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #211C1E;
				margin-bottom: 30rpx;
			}

			.course {

				width: 100%;
				margin-bottom: 35rpx;

				.course-list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					// grid-gap: 12rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}

				.course-list-item+.course-list-item {
					margin-left: 12rpx;
				}

				.course-list-item {
					min-width: 0;
					background: #F6F7F8;

					.course-list-item-header {

						height: 184rpx;
						position: relative;
						background: #fbfbfb;

						.course-list-item-header-video {}

						.course-list-item-header-play {
							position: absolute;
							right: 17rpx;
							bottom: 9rpx;
							width: 40rpx;
							height: 40rpx;
						}

						.realShooting-nums {
							position: absolute;
							right: 1rpx;
							bottom: 11rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							background: rgba(0, 0, 0, 0.4);
							border-radius: 21rpx;
							min-width: 93rpx;
							height: 41rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.course-list-item-title {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #292B3B;
						margin-bottom: 14rpx;
						box-sizing: border-box;
						padding: 0 7rpx;
					}

					.course-list-item-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						padding: 0 7rpx;
						padding-bottom: 7rpx;

						.course-list-item-footer-status {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #FF8400;
						}

						.course-list-item-footer-nums {
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #292B3B;

							image {
								width: 19rpx;
								height: 15rpx;
								margin-right: 11rpx;
							}
						}
					}
				}
			}

			.list-item-activity {
				width: 100%;
				margin-bottom: 22rpx;

				.list-item-activity-crad {
					background: #F6F7F8;
					border-radius: 33rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 24rpx 22rpx;
					margin-bottom: 25rpx;

					.list-item-activity-crad-item {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #211C1E;
						display: flex;
						align-items: center;
						margin-bottom: 33rpx;

						&>text {
							font-weight: bold;
						}

						view {
							width: 47rpx;
							height: 51rpx;
							background: #FFFFFF;
							border-radius: 12rpx;
							border: 2px solid #DBDFE1;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #211C1E;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 8rpx;
						}
					}

					.list-item-activity-crad-item:last-child {
						margin-bottom: 0;
					}

				}

				.list-item-activity-people {
					width: 100%;
					margin-bottom: 41rpx;

					.list-item-activity-people-title {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #211C1E;
						margin-bottom: 31rpx;
					}

					.nums {
						width: 100%;
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						margin: 0 auto;
						margin-bottom: 24rpx;

						.nums-img {
							//padding-left: 36rpx;
							min-width: 0;
							flex: 1;
							display: flex;
							align-items: center;

							image {
								width: 56rpx;
								height: 56rpx;
							}

							// 定义变量，设置循环次数
							$num-items: 10;

							// 循环生成样式
							@for $i from 1 through $num-items {
								image:nth-child(#{$i}) {
									transform: translateX($i * -6rpx);
								}
							}
						}

						.nums-tx {
							// width: 130rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #211C1E;
						}
					}
				}

				.list-item-activity-btn {
					width: 170rpx;
					height: 66rpx;
					background: #12B475;
					border-radius: 33rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-bottom: 22rpx;
				}

				.list-item-activity-btn-cancle {
					width: 170rpx;
					height: 66rpx;
					background: #fff;
					border: 1px solid #12B475;
					border-radius: 33rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #12B475;
					margin-bottom: 22rpx;
				}
			}

			.list-item-footer {
				padding-top: 24rpx;
				box-sizing: border-box;
				padding: 24rpx 24rpx 0;
				border-top: 1rpx solid #D7D7D7;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view {
					display: flex;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 7rpx;
					}
				}
			}
		}
	}

	.list-item-score {
		background: #F6F7F8;
		border-radius: 33rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 12rpx 22rpx;
		margin-bottom: 25rpx;

		.list-item-score-list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			view {
				margin-right: 10rpx;
				font-size: 22rpx;

				text {
					color: #12B475;
				}
			}
		}
	}

	.list-item-footer {

		&>view {
			display: flex;
			align-items: center !important;
		}
	}

	.list-item-score {
		padding-bottom: 0 !important;

		.list-item-score-list {
			align-items: none;
			flex-wrap: wrap;
			margin-bottom: 0rpx !important;

			view {
				margin-right: 30rpx;
				padding-bottom: 22rpx;
			}
		}
	}

	.list-item-time {
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 22rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.barTitle {
		position: relative;

		//box-shadow: 0px 10px 10px #666666;
		.icon {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: rotateY(-50%);
			margin: auto;
		}
	}

	.circleTabs {
		overflow-x: scroll;
	}

	.search-box {
		background: #292639;
		padding-top: 6rpx;
	}

	.circle-item {
		box-sizing: border-box;
	}

	.circle-item-ac {

		// image {
		// 	border: 4rpx solid #F4DEBF;
		// 	box-sizing: border-box;
		// }

	}

	.circle-item-add {
		display: flex;
		flex-direction: column;
		align-items: center;


		.circle-text {
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}

	.circle-item-ac {
		.circle-item-add-icon {
			background-color: #F4DEBF;
			border-radius: 20rpx;
		}

	}

	.circle-item-add-icon-item {
		background-color: #33303f;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		background-color: #292639;

		.search-input {
			width: 553rpx;
			height: 70rpx;
			background: #33303f;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 27rpx;
			margin-right: 25rpx;

			.search-input-icon {
				width: 32rpx;
				height: 32rpx;

			}

			input {
				flex: 1;
				min-width: 0;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #fff;
				margin-left: 11rpx;
			}

			.search-input-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7e7b8c;
			}
		}

		.search-rig {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 9rpx;
			}

			.search-rig-s {
				width: 52rpx;
				height: 25rpx;
			}

		}
	}

	.barTitle {
		width: 100%;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #292639;
		//background: red;
	}

	.circleTabs {
		padding-top: 25rpx;
	}

	.circle-item-add-icon {
		position: relative;

		.circle-item-badge {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: fit-content;
		}
	}

	.search {
		margin-bottom: 0;
	}
</style>